import theme from './theme';
import * as echarts from 'echarts/src/echarts';
import 'echarts/src/chart/bar';
import 'echarts/src/component/tooltip';
// import 'echarts/src/component/title';
import 'echarts/src/component/legend';
import 'zrender/src/svg/svg';
/**
 * @module common/echarts/column
 * @author ashen
 * @description  柱图，调用initColumn方法初始化chart
 * @requires module:common/echarts/theme
 */

/**
 * @param  {Integer} id - 页面id或者class
 * @returns {Object} 图表实例dcChart
 */
export function initColumn (id) {
  const dcChart = echarts.init(document.querySelector(id), theme, {renderer: 'svg'});
  dcChart.showLoading();
  dcChart.setOption(option);
  window.addEventListener('resize', function () {
    dcChart.resize();
  });
  return dcChart;
};
/** 导出图表配置option*/
export const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  grid: {
    left: '5%',
    right: '10%',
    bottom: '16%',
    top: '10%',
    containLabel: true
  },
  legend: {
    bottom: '5%',
    center: 'center',
    data: []
  },
  xAxis: {
    data: [],
    axisLine: {
      lineStyle: {
        color: '#999'
      }
    },
    axisTick: {
      alignWithLabel: true
    },
    axisLabel: {
      color: '#666666'
    },
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '',
    type: 'bar',
    data: []
  }]
};
